<template>
  <div class="indoor">
    <div class="step">
      <p>当前正在进行第 {{ current + 1 }} 步</p>
      <Steps :current="current">
        <Step title="步骤1"></Step>
        <Step title="步骤2"></Step>
        <Step title="步骤3"></Step>
        <Step title="步骤4"></Step>
        <Step title="步骤5"></Step>
        <Step title="步骤6"></Step>
        <Step title="步骤7"></Step>
        <Step title="步骤8"></Step>
        <Step title="步骤9"></Step>
        <Step title="步骤10"></Step>
        <Step title="步骤11"></Step>
      </Steps>
      <br />
      <i-button type="primary" @click="next">下一步</i-button>
      <i-button type="primary" @click="out">返回</i-button>
    </div>
    <br />
    <el-divider></el-divider>
    <br />
    <Steps :current="current" direction="vertical">
      <Step title="1" content="1"></Step>
      <Step title="2" content="2"></Step>
  
    
    </Steps>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0
    };
  },
  mounted() {
    if (this.current == 0) {
      this.$router.push("/indoor/0");
    }
  },
  methods: {
    next() {
      this.current += 1;
    },
    out() {
      if (this.current < 1) {
        this.current = 0;
      } else {
        this.current -= 1;
      }
    },
    change() {
      this.$router.push("/indoor/" + this.current);
    }
  },
  watch: {
    current: "change"
  }
};
</script>

<style scoped>
.indoor {
  overflow-y: auto;
  overflow-x: auto;
  height: 100%;
  widows: 100%;
  position: relative;
}
.content {
  position: absolute;
  top: 300px;
  left: 500px;
}
.step {
  overflow-x: auto;
  word-wrap: break-word;
}
.step > p {
  margin-top: 15px;
}
</style>